<!--
/**
* Author: KSJ
* Date: 2022-08-03 16:00
* Desc: 地图导航
*/
-->
<template>
  <view class="pr30 pl30 pt30 pb30 city-choose">
    <view class="fs32 fb fc-white mb15">{{ name }}</view>
    <view class="flex flex-m">
      <view class="fs26 fc-white">{{ address }}</view>
      <view class="choose-btn flex flex-c-m" @click="lookMap">
        <zm-image
          src="/cinema-guide.png"
          is-join
          width="23rpx"
          height="28rpx"
        ></zm-image>
        <view class="ml10">地图</view>
      </view>
    </view>
  </view>
</template>

<script>
  import ZmImage from '@/commons/ZmImage'
  export default {
    name: '',
    components: { ZmImage },
    props: {
      name: {
        type: String
      },
      address: {
        type: String
      },
      longitude: {
        type: String
      },
      latitude: {
        type: String
      }
    },
    data() {
      return {}
    },
    methods: {
      async lookMap() {
        const isSingle = this.$auth.getSingleModel()
        if (this.$auth.platform() === 'mp-toutiao' || !isSingle) {
          await this.$auth.toGetAreaInfo(true)
        }
        this.$auth.getMapGuide(
          this.latitude,
          this.longitude,
          this.name,
          this.address
        )
      }
    }
  }
</script>
<style lang="scss" scoped>
  .city-choose {
    height: 160rpx;
    box-sizing: border-box;
  }
  .choose-btn {
    color: #fff;
    border: solid 1rpx #fff;
    border-radius: 24rpx;
    height: 48rpx;
    width: 130rpx;
    font-size: 24rpx;
    box-sizing: border-box;
    margin-left: auto;
  }
</style>
